<template>
  <div>
    <div class="header-title">
      <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
      <span v-show="activityType == 'new'?true:false">打新活动</span>
      <span v-show="activityType == 'auction'?true:false">拍卖活动</span>
      <span v-show="activityType == 'bulk'?true:false">团购活动</span>
      <span v-show="activityType == 'raise'?true:false">众筹活动</span>
      <span></span>
    </div>
    <!-- 打新活动跳转 -->
    <div v-show="activityType == 'new'?true:false">
      <!-- 暂未公布结果 -->
      <div v-show="false" class="resules">
        <img src="../../assets/img/dingdan.png" alt />
        <P>暂未公布结果</P>
      </div>
      <!-- 恭喜您，您已成功中签！(未认购) -->
      <div v-show="true">
        <div class="auctionId">
          <img src="../../assets/img/success@2x.png" alt />
        </div>
        <p style="text-align: center">恭喜您，您已成功中签！(未认购)</p>
      </div>

      <!-- 公布时间：2019-06-20 12:00:00 -->
      <div v-show="false" class="time">
        <p>公布时间：2019-06-20 12:00:00</p>
      </div>
      <div class="duringId">
        <div class="during">
          <div class="purchase">
            <div>
              <img src="../../assets/img/bg1.png" alt />
            </div>
            <div>
              <div>中国深圳坪中国深圳坪山1号坪山1号山1号坪山1号</div>
              <p>进行中：05.23 12:00:00结束</p>
            </div>
          </div>
        </div>
        <div class="v-clock"></div>
        <!-- 申购号码 -->
        <div class="phone">
          <div>申购号码：ghjcgcdc123</div>
        </div>
        <div class="phone">
          <div>申购数量：100Token</div>
        </div>
        <div class="phone">
          <div>申购金额：1000USDT</div>
        </div>
        <div style="border-bottom:none" class="phone">
          <div>申购时间：2019-07-16 12:00:00</div>
        </div>
      </div>
      <!-- 去认购 -->
      <div v-show="true" class="invite-people">
        <mt-button @click="purchaseId" class="charge-btn" size="normal" type="primary">去认购</mt-button>
        <div class="wnxin">温馨提示：拍到后超过24小时未认购，将视为自动放弃，平台将扣除1%手续费</div>
      </div>
    </div>
    <!-- 拍卖 -->
    <div v-show="activityType == 'auction'?true:false">
      <div v-show="true">
        <div class="auctionId">
          <img src="../../assets/img/default@2x.png" alt />
        </div>
        <p style="text-align: center">很遗憾，您已经出局！</p>
      </div>
      <!-- 恭喜您，您暂时领先！ -->
      <div v-show="false">
        <div class="auctionId">
          <img src="../../assets/img/success@2x.png" alt />
        </div>
        <p style="text-align: center">恭喜您，您暂时领先！</p>
      </div>

      <!-- 拍卖进行中领先 -->
      <div class="duringId">
        <div class="during">
          <div class="purchase">
            <div>
              <img src="../../assets/img/bg1.png" alt />
            </div>
            <div>
              <div>中国深圳坪中国深圳坪山1号坪山1号山1号坪山1号</div>
              <p>进行中：05.23 12:00:00结束</p>
            </div>
          </div>
        </div>
        <div class="v-clock"></div>
        <!-- 申购号码 -->
        <div class="phone">
          <div>拍卖号码：SOH46</div>
        </div>
        <div class="phone">
          <div>拍卖数量：100 Token</div>
        </div>
        <div class="phone">
          <div>保证金：100 USDT</div>
        </div>
        <div class="phone">
          <div>我的出价：1000 USDT</div>
        </div>
        <div style="border-bottom:none" class="phone">
          <div>出价时间：2019-06-21 10:00:00</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activityType: this.$route.query.activityType
    };
  },
  methods:{
    purchaseId(){
         this.$router.push({ name: "order" });
    }
  },
  watch: {
    $route(to, from) {
      this.activityType = this.$route.query.activityType;
    }
  }
};
</script>
<style lang="less" scoped>
.header-title {
  border-bottom: 1px solid @blackColor3;
}
// 结果
.resules {
  .flexStart();
  border-bottom: 1px solid @blackColor3;
  padding-bottom: 13px;
  img {
    width: 15px;
    height: 16px;
    margin-left: 25px;
    margin-top: 15px;
  }
  p {
    margin-left: 11px;
    font-size: 16px;
    color: @blackColor8;
    margin-top: 13px;
  }
}
.time p {
  margin-left: 25px;
  margin-top: 16px;
  font-size: 15px;
  color: @blackColor7;
}
// 进行时
.duringId {
  width: 90%;
  background: #f8f8f8;
  margin: 13px auto;
  padding-bottom: 8px;
  .during {
    margin-left: 15px;
    .purchase {
      .flexStart();
      // 线
      div:nth-child(1) img {
        width: 80px;
        height: 80px;
        margin-top: 18px;
      }
      div:nth-child(2) div {
        font-size: 16px;
        margin-left: 15px;
        color: @blackColor8;
        margin-top: 14px;
      }
      div:nth-child(2) p {
        width: 70%;
        background: @blueColor4;
        font-size: 12px;
        color: @blackColor1;
        margin-left: 15px;
        margin-top: 24px;
        border-radius: 3px;
        text-align: center;
      }
    }
  }
  .v-clock {
    width: 100%;
    border-bottom: 1px solid @blackColor3;
    margin-top: 15px;
  }
  .phone {
    border-bottom: 1px solid @blackColor3;
    padding: 0 10px;
    div:nth-child(1) {
      color: @blackColor5;
      font-size: 15px;
      padding-bottom: 10px;
      margin-top: 10px;
    }
  }
}
//   去认购
.invite-people {
  width: 90%;
  margin: 0 auto 15px;
  //   温馨提示
  .wnxin {
    font-size: 12px;
    color: @blackColor5;
    margin-top: 14px;
  }
  .charge-btn {
    width: 100%;
    font-size: 16px;
    background-color: @blueColor10;
    margin-top: 30px;

    .flexCenterContent();
  }
}
// 拍卖
.auctionId {
  .flexCenter();
  img {
    width: 76px;
    height: 63px;
  }
}
p {
  font-size: 15px;
  margin-top: 10px;
  color: @blackColor8;
}
</style>

